<template>
  <div class="app-container">
    <div class="entrust-list-view">
      <el-table :data="tableData3"
                border
                style="width: 100%"
                :row-key="tableData3.ent_id">
        <el-table-column prop="ent_id"
                         label="ID"
                         width="50">
        </el-table-column>
        <el-table-column prop="ent_title"
                         label="委托标题">
        </el-table-column>
        <el-table-column prop="ent_biography"
                         label="委托简介">
        </el-table-column>
        <el-table-column prop="users_model.nickname"
                         label="作者"
                         width="100">
        </el-table-column>
        <el-table-column prop="tags"
                         label="委托标签"
                         width="150">
          <template slot-scope="scope">
            <el-tag size="mini"
                    v-for="tag of JSON.parse(scope.row.tags)">{{ tag }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ent_path"
                         label="委托文件"
                         width="80">
          <template slot-scope="scope">
            <el-button @click="handleDownloadEntrust(scope.row.ent_path)"
                       type="primary"
                       plain
                       size="small">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="update_time"
                         label="创建时间"
                         width="200">
        </el-table-column>
        <el-table-column prop="setting"
                         label="审核设置"
                         width="100">
          <template slot-scope="scope">
            <el-popover ref="popover4"
                        placement="left"
                        width="220"
                        trigger="click">
              <el-switch style="display: block"
                         v-model="ent_status"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         active-text="审核通过"
                         inactive-text="审核未通过"
                         active-value="1"
                         inactive-value="0"
                         @change="handleChangeStatus(scope.row.ent_id)">
              </el-switch>
            </el-popover>
            <el-button @click="handleSetting(scope.row)"
                       type="primary"
                       plain
                       size="small"
                       v-popover:popover4>审核设置</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="delete"
                         label="删除"
                         width="80">
          <template slot-scope="scope">
            <el-button @click="handleDelete(scope.row.ent_id)"
                       type="danger"
                       plain
                       size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getEntrustList, updateEntrustStatus, delEntrust } from '@/api/entrustList.js'
export default {
  name: 'EntrustList',
  computed: {},
  data() {
    return {
      tableData3: [],
      ent_status: 0,
    }
  },
  methods: {
    // 获取委托信息
    getEntrustInfo: function () {
      return getEntrustList().then((res) => {
        this.tableData3.splice(0, this.tableData3.length)
        this.tableData3.push(...res.data.data.rows)
      })
    },
    // 根据url下载委托文件
    handleDownloadEntrust: function (url) {
      console.log(url)
    },
    // 委托审核按钮，初始化内部所需参数
    handleSetting: function (info) {
      let ent_status = info.status.toString()
      this.ent_status = ent_status
    },
    // 删除委托
    handleDelete: function (id) {
      delEntrust({ ent_id: id }).then((res) => {
        if (res.data.status === 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getEntrustInfo()
        }
      })
    },
    // 委托审核开关
    handleChangeStatus: function (ent_id) {
      updateEntrustStatus({
        ent_id: ent_id,
        status: this.ent_status,
      }).then((res) => {
        if (res.data.status == 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getEntrustInfo()
        } else {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'warning',
          })
        }
      })
    },
  },
  beforeMount() {
    this.getEntrustInfo()
  },
}
</script>

<style lang="scss"></style>